<template>
	<div>
		<!-- 下方代码是插值语法，可以直接看到vc身上的属性，所以可以直接$store -->
		<h2>当前求和为：{{sum}}</h2>&nbsp;
		<h2>当前求和放大100倍后的值：{{bigSum}}</h2>&nbsp;
		<h4>{{msg}}--{{school}}</h4>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>&nbsp;
		<button @click="increment(n)">+</button>&nbsp;
		<button @click="decrement(n)">-</button>&nbsp;
		<button @click="incrementIfOdd(n)">奇数再加</button>&nbsp;
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

	export default {
		name:'Count',
		data(){
			return {
				n:1 //n是用户选择的数字
			}
		},
		mounted(){
			//验证一下mapState的返回值
			/* const x = mapState({
				he:'sum'
			})
			console.log(x) */
		},
		computed:{
			//靠编码人员自己配置计算属性sum，靠编码人员自己去vuex中读取sum的值
			//#region 
			/* 
				he(){
					return this.$store.state.sum
				},
				xuexiao(){
					return this.$store.state.school
				},
				xiaoxi(){
					return this.$store.state.msg
				},
			 */

			//靠mapState生成计算属性sum，并读取sum的值
			/* ...mapState({
				he:'sum',
				xuexiao:'school',
				xiaoxi:'msg'
			}), */

			//靠mapState生成计算属性sum，并读取sum的值 ---- 简写，前提：vuex的state中保存的数据名，和你要生成的计算属性同名
			...mapState(['sum','school','msg']),
			//#endregion

			//靠编码人员自己配置计算属性daHe，靠编码人员自己去vuex的getters中读取bigSum的值
			//#region 
			/* 
				daHe(){
					return this.$store.getters.bigSum
				}
			*/

			//靠mapGetters配置计算属性daHe，去vuex的getters中读取bigSum的值
			/* 
				...mapGetters({
					daHe:'bigSum'
				})
			*/
			//靠mapGetters配置计算属性bigSum，去vuex的getters中读取bigSum的值
			...mapGetters(['bigSum'])
			//#endregion
			
		},
		methods:{
			//直接加，不包含其他业务逻辑，所以可以直接用commit去指挥mutations
			/* increment(){
				this.$store.commit('JIA',this.n)
			}, */

			/* //直接减，不包含其他业务逻辑，所以可以直接用commit去指挥mutations
			decrement(){
				this.$store.commit('JIAN',this.n)
			}, */

			...mapMutations({
				increment:'JIA',
				decrement:'JIAN'
			}),

			// ...mapMutations(['JIA','JIAN']),


			
			/* ********************************************************************************** */

			//奇数再加,是包含其他业务逻辑的，要经过action处理业务逻辑，合适的时候再用commit去指挥mutations
			/* incrementIfOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			//等一等再加，是包含其他业务逻辑的，要经过action处理业务逻辑，合适的时候再用commit去指挥mutations
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			} */

			...mapActions({
				incrementIfOdd:'jiaOdd',
				incrementWait:'jiaWait'
			})

			// ...mapActions(['jiaOdd','jiaWait'])
		}
	}
</script>